<template>
    <div class="content">
        <van-sticky>
            <van-nav-bar
                @click-left="$router.back()"
                left-arrow
                v-if="$route.query.msg==1"
                title="设置姓名"
            ></van-nav-bar>
            <van-nav-bar
                @click-left="$router.back()"
                left-arrow
                v-if="$route.query.msg==2"
                title="设置手机号"
            ></van-nav-bar>
            <van-nav-bar
                @click-left="$router.back()"
                left-arrow
                v-if="$route.query.msg==3"
                title="设置微信号"
            ></van-nav-bar>
        </van-sticky>
        <div class="main">
             <van-field
                v-if="$route.query.msg==1"
                v-model="name"
                placeholder="请输入姓名"
            />
            <van-field
                v-if="$route.query.msg==2"
                v-model="phone"
                placeholder="请输入手机号"
            />
            <van-field
                v-if="$route.query.msg==3"
                v-model="weChatNo"
                placeholder="请输入微信号"
            />
        </div>
        <div class="contents" @click="save">
            保存
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            name:"",
            phone:"",
            weChatNo:""
        }
    },
     created(){
        document.querySelector("#app").style.width = "100%";
        document.querySelector("#app").style.height = "100vh";
        document.querySelector("#app").style.backgroundColor = "#f3f5f7";
    },
    methods:{
        save(){
            if(this.name){
                this.$api.editUserInfo({id:this.$store.state.userInfo.id,name:this.name}).then(res=>{
                if(res.code==0){
                    this.$toast("保存成功")
                    this.$router.push("/personal")
                }else{
                    this.$toast(res.msg)
                }
            })
            }else if(this.phone){
                this.$api.editUserInfo({id:this.$store.state.userInfo.id,phone:this.phone}).then(res=>{
                    if(res.code==0){
                        this.$toast("保存成功")
                        this.$router.push("/personal")
                    }else{
                        this.$toast(res.msg)
                    }
                })
            }else if(this.weChatNo){
                 this.$api.editUserInfo({id:this.$store.state.userInfo.id,weChatNo:this.weChatNo}).then(res=>{
                    if(res.code==0){
                        this.$toast("保存成功")
                        this.$router.push("/personal")
                    }else{
                        this.$toast(res.msg)
                    }
                })
            }
        }
    }
}
</script>
<style lang="less" scoped>
.content{
    .main{
    padding: 20px;
    }
    .contents{
        width: 80%;
        height: 40px;
        opacity: 1;
        background: #477FE6;
        border-radius: 41px;
        text-align: center;
        line-height: 40px;
        color: #ffffff;
        margin: 0 auto;
        position: fixed;
        bottom: 60px;
        left: 10%;
    }
}
</style>